<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>用户管理</title>
		<link rel="stylesheet" href="{{ url_for('static',filename='css/bootstrap.min.css')}}" />
        <link rel="stylesheet" href="{{ url_for('static',filename='css/show.css')}}" />
		<link rel="preconnect" href="https://fonts.gstatic.com">
		<link href="https://fonts.googleapis.com/css2?family=ZCOOL+QingKe+HuangYou&display=swap" rel="stylesheet">
		<script src="{{ url_for('static',filename='js/jquery.min.js')}}"></script>
		<script src="{{ url_for('static',filename='js/popper.min.js')}}"></script>
		<script src="{{ url_for('static',filename='js/bootstrap.min.js')}}"></script>

		<script type="text/javascript">
			$(document).ready(function(){

			    var data = {
			    'url':document.getElementById('url').value
			    }

			    $.ajax({
                    type: "post",
                    url: '/search',
                    dataType: 'json',
                    data: JSON.stringify(data),
                    contentType: 'application/json;charset=UTF-8',//编码格式

                    success: function (response) {
                        var data = response.data;
                        //console.log(data);
                        var thead=document.getElementById('biaoge_t');
                        var htr=document.createElement('tr');

                        var k = 0;
                        for(var key in data[0]){
                            //eval("var td" + key);
                            //var td_by_key = eval('td' + key);
                            td_by_key = document.createElement('th');
                            td_by_key.innerHTML = key;
                            td_by_key.setAttribute("id", 'main_key_td' + k);
                            td_by_key.setAttribute("value", key);
                            htr.appendChild(td_by_key);
                            k += 1;
                        }
                        var td_check = document.createElement('th');  // 表头创建checkbox列
                        td_check.innerHTML = '选择';
                        htr.appendChild(td_check);
                        thead.appendChild(htr);

                        var tbody = document.getElementById('biaoge');
                        for(var i = 0; i < data.length; i++){
                            tr_by_i = document.createElement('tr');
                            tr_by_i.setAttribute("id", 'tr' + i);
                            tr_by_i.setAttribute("name", "tr_info");
                            tr_by_i.setAttribute("value", data[i][0]);

                            //<input type="checkbox" name="category" value="今日话题" />
                            var td_checkbox = document.createElement('input');  // 每行创建checkbox
                            td_checkbox.setAttribute("type", "checkbox");
                            td_checkbox.setAttribute("name", "check_box");
                            td_checkbox.setAttribute("value", 'tr' + i);


                            var j = 0;
                            for(var key in data[i]){
                                td_by_key = document.createElement('td');
                                td_by_key.setAttribute("id", 'tdkeytr' + i + j);  // 赋值id为行值
                                td_by_key.innerHTML = data[i][key];  // 依次存数据库每个键的值
                                td_by_key.setAttribute("value", data[i][key]);
                                tr_by_i.appendChild(td_by_key);
                                j += 1;
                            }
                            tr_by_i.appendChild(td_checkbox);  // 每行添加checkbox
                            tbody.appendChild(tr_by_i);
                        }
                    },
                    error: function(xhr, type) {
                        console.log(xhr);
                    }
				});
			})

            function sc(){
                var key_arr = new Array();
                var arr = new Array();
                var items = document.getElementsByName("check_box");
                for (i = 0; i < items.length; i++) {
                    if (items[i].checked) {
                        arr.push(items[i].value);
                    }
                }

                console.log(document.getElementById('url').value);
                key_arr.push(document.getElementById('url').value);
                var flag = confirm('确认删除？');
                if(flag == true){
                    var tbody = document.getElementById('biaoge');
                    while (arr.length > 0) {
                        var cb = arr.pop();
                        var trchecked = document.getElementById(cb); //选中要删除的tr
                        var str = 'tdkey' + cb + '0'
                        console.log(str);
                        var mainkey = document.getElementById(str);
                        key_arr.push(mainkey.getAttribute("value")); // $("#str").text();
                        console.log(mainkey.getAttribute("value"));
                        tbody.removeChild(trchecked);
                    }
                    //alert(key_arr.length);
                }

                var main_key_name = document.getElementById('main_key_td0').getAttribute("value");
                var data={};
                data[main_key_name] = key_arr
                $.ajax({
                    type: "post",
                    url: '/deletetr',
                    dataType: 'json',
                    data: JSON.stringify(data),
                    contentType: 'application/json;charset=UTF-8',//编码格式
                    success: function (response) {

                        if(response.data != 'undefined' && response.data == 'success')
                        {
                            alert("删除成功！");
                        }
                        else
                        {
                            alert("删除失败！:为找到待删除数据");
                        }

                    },
                    error: function(xhr, type) {
                        console.log(xhr);
                    }
                });
            }

		</script>
	</head>
	<body>
	<div class="banner">
			<span>爬&nbsp;&nbsp;&nbsp;&nbsp;虫&nbsp;&nbsp;&nbsp;&nbsp;数&nbsp;&nbsp;&nbsp;&nbsp;据&nbsp;&nbsp;&nbsp;&nbsp;展&nbsp;&nbsp;&nbsp;&nbsp;示</span>
	</div>
	<div class="midbody">
        <input id="url" value="{{url}}" readonly>
		<div class="card" style="overflow:auto; height:1000px">
            <table class="table table-hover">
                <thead id="biaoge_t">

                </thead>
                <tbody id="biaoge">

                </tbody>
            </table>
        </div>
        <div class="btndiv" style="margin-left: 80%; width: 20%; height:60px">
            <button type="button" onclick="sc()" style="margin-left: 50%">删除</button>
        </div>
	</div>

	<!-- 模态框 修改 -->
<div class="modal fade" id="myModal">
  <div class="modal-dialog modal-lg">
    <div class="modal-content">

      <!-- 模态框头部 -->
      <div class="modal-header">
        <h4 class="modal-title">修改密码</h4>
        <button type="button" class="close" data-dismiss="modal">&times;</button>
      </div>

      <!-- 模态框主体 -->
      <div class="modal-body">
          <h3  id="w_user"></h3>
          <input name="y_password" id="y_pw" type="text" placeholder="输入原密码：">
          <input name="x_password" id="x_pw" type="password" placeholder="输入新密码：">
          <input name="x_password_s" id="x_pw_s" type="password" placeholder="确认新密码：">
      </div>

      <!-- 模态框底部 -->
      <div class="modal-footer">
          <button type="button" class="btn btn-ok" data-dismiss="modal" onclick="update_pw()">确定</button>
        <button type="button" class="btn btn-secondary" data-dismiss="modal">关闭</button>
      </div>

    </div>
  </div>
</div>

    	<!-- 模态框 删除 -->
<div class="modal fade" id="myModal_s">
  <div class="modal-dialog modal-lg">
    <div class="modal-content">

      <!-- 模态框头部 -->
      <div class="modal-header">
        <h4 class="modal-title">删除</h4>
        <button type="button" class="close" data-dismiss="modal">&times;</button>
      </div>

      <!-- 模态框主体 -->
      <div class="modal-body">
        是否确认删除？
      </div>

      <!-- 模态框底部 -->
      <div class="modal-footer">
          <button type="button" class="btn btn-ok" data-dismiss="modal" onclick="update_pw()">确定</button>
        <button type="button" class="btn btn-secondary" data-dismiss="modal">关闭</button>
      </div>

    </div>
  </div>
</div>

	</body>
</html>